<template>
	<!-- 我的页面 -->
	<view class="my-container">
		<header>
			<view class="my-head-top"></view>
			<view class="my-head-bottom">
				<view class="bottom-context">
					<image class="header-portrait" :src=userinfo.avatarUrl mode=""></image>
					<view class="botton-font">
						<view class="name">
							<view>{{userinfo.nickName}}</view>
							<view class="signature">{{userinfo.extend.introduce}}</view>
						</view>
					</view>
					<view class="edit-info"  @click="skipEdit">
						<text style="margin-left: 24rpx;">编辑个人信息</text>
					</view>

				</view>
				<view class="vip-card">
					<image src="../../static/my/Vector.png" mode=""></image>
					<view class="vip-font">
						<text>尊享卡</text><text class="date">2021/09/24到期</text>

					</view>
					<text class="immediately">
						立即续费
					</text>
				</view>
			</view>

			<!-- 圆形背景 -->
			<view class="my-column"></view>

		</header>
		<view class="list">
			<view class="item" style="margin-bottom: 20rpx;" @click="skipShare" >
				<image src="../../static/my/Send.png" mode=""></image>
				<text style="margin-left: 28rpx;">分享</text>
				<text class="spread">成为推广员</text>
				<span class="iconfont icon-jiantou icon"></span>
			</view>
			<view class="item" @click="skipProfit">
				<image src="../../static/my/Wallet.png" mode=""></image>
				<text style="margin-left: 28rpx;">收益</text>
				<span class="iconfont icon-jiantou icon"></span>
			</view>
			<view class="item" style="margin-bottom: 20rpx;" @click="skipAward">
				<image src="../../static/my/Document.png" mode=""></image>
				<text style="margin-left: 28rpx;">有奖任务</text>
				<span class="iconfont icon-jiantou icon"></span>
			</view>
			<view class="item" @click="skipComplaint">
				<image src="../../static/my/Heart.png" mode=""></image>
				<text style="margin-left: 28rpx;">投诉与建议</text>
				<span class="iconfont icon-jiantou icon"></span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					name: '大橙子Boy',
					signature: '所爱隔山隔海皆可平'
				},
				token:'',
				userinfo:"",
				lists:""
			}
		},
		onLoad(){
			uni.getStorage({
			    key: 'token',
			    success:  res=> {
					this.tokens=res.data
					console.log('mmm',this.tokens)
			    }
			});
		},
		mounted() {
			// 初始化获取数据
			this.__initClassData()			
		},
		methods: {
			__initClassData() {
				this.$api.get({
					url: '/user/user/get_usr_message',
					data:{token:this.tokens}
				}).then(res => {
						this.userinfo=res.data
						
						
						console.log('dddd',res.data)
					})
				},
				skipComplaint(){
								uni.navigateTo({
									url:'../my-list/complaint/complaint'
								})
							},
							skipAward(){
								uni.navigateTo({
									url:'../my-list/award/award'
								})
							},
							skipProfit(){
											uni.navigateTo({
												url:'../my-list/profit/profit'
											})
										},
										skipEdit(){
											uni.navigateTo({
												url:'../my-list/editUser/editUser'
											})
										},
										skipShare(){
											uni.navigateTo({
												url:'../my-list/share/share'
											})
										}
		}
	}
</script>

<style>
	.my-container {
		width: 100%;
		height: 1456rpx;
		background: rgb(247, 247, 247);
	}

	.my-container .list {
		width: 100%;
		height: 984rpx;
	}

	.my-container .list .item {
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		line-height: 120rpx;
		border-bottom: 1px solid rgb(247, 247, 247);
		position: relative;
	}

	.my-container .list .item .icon {
		position: absolute;
		right: 52rpx;
		font-size: 24rpx;
		line-height: 120rpx;
	}

	.my-container .list .item .spread {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.45);
		position: absolute;
		right: 90rpx;
	}

	.my-container .list .item text {
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 600;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.my-container .list .item image {
		width: 40rpx;
		height: 40rpx;
		margin: 40rpx 0 0 36rpx;
		vertical-align: top;
	}

	.my-container .my-head-top {
		width: 100%;
		height: 176rpx;
		background: #3965FF;
	}

	.my-container .my-head-bottom {
		width: 100%;
		height: 298rpx;
		background: #3965FF;
		position: relative;
	}

	.my-container .my-head-bottom .bottom-context {
		width: 100%;
		height: 136rpx;
		display: flex;
		position: relative;
	}

	.my-container .my-head-bottom .vip-card {
		width: 688rpx;
		height: 128rpx;
		background: linear-gradient(90deg, #1F2742 0%, #353F5F 100%);
		position: absolute;
		z-index: 1;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		border-radius: 30rpx 30rpx 0 0;
	}

	.my-container .my-head-bottom .vip-card .vip-font {
		position: absolute;
		top: 30rpx;
		left: 108rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: bold;
		font-size: 22px;
		height: 62rpx;
		line-height: 62rpx;
		background-image: -webkit-linear-gradient(rgba(232, 208, 159, 1), rgba(177, 159, 114, 1));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;

	}

	.my-container .my-head-bottom .vip-card .vip-font .date {
		font-size: 24rpx;
		margin-left: 16rpx;
	}

	.my-container .my-head-bottom .vip-card .immediately {
		position: absolute;
		right: 32rpx;
		top: 44rpx;
		width: 160rpx;
		height: 56rpx;
		color: #1F2742;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 550;
		font-size: 28rpx;
		text-align: center;
		line-height: 56rpx;
		background: linear-gradient(180deg, #E8D09F 0%, #B19F72 100%);
		border-radius: 20px;
	}

	.my-container .my-head-bottom .vip-card image {
		width: 56rpx;
		height: 52rpx;
		margin: 35rpx 0 0 36rpx;
	}

	.my-container .my-head-bottom .bottom-context .edit-info {
		width: 220rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 20px 0px 0px 20px;
		position: absolute;
		right: 0;
		font-size: 28rpx;
		line-height: 60rpx;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
	}

	.my-container .my-head-bottom .bottom-context .header-portrait {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-left: 32rpx;
	}

	.my-container .my-head-bottom .bottom-context .botton-font {
		height: 68rpx;
		margin-left: 32rpx;
	}

	.my-container .my-head-bottom .bottom-context .botton-font .name {
		margin-top: 4rpx;
		font-size: 48rpx;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 800;
		display: flex;
		flex-direction: column;
	}

	.my-container .my-head-bottom .bottom-context .botton-font .signature {
		height: 40rpx;
		font-size: 28rpx;
		padding-top: 4rpx;
		color: rgba(255, 255, 255, 0.65);
	}

	.my-container .my-column {
		width: 520rpx;
		height: 520rpx;
		background-color: red;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: -50rpx;
		background: rgba(255, 255, 255, 0.04);
	}
</style>
